<template>
    <div id="myExam">
        <div class="title">我的试卷</div>
        <div class="wrapper">
            <ul class="top">
                <li class="order">试卷列表</li>
                <li class="search-li">
                    <div class="icon"><input type="text"
                     placeholder="试卷课程名称" class="search"
                     v-model="this.formInline.key">
                        <i class="el-icon-search"></i>
                    </div>
                </li>
                <li>
                    <el-button type="primary">搜索试卷</el-button>
                </li>
            </ul>
            <ul class="paper">
                <li class="item" v-for="(item,index) in tableData" :key="index">
                    <h4 @click="toPaperInfo(item.id)">{{item.source}}</h4>
                    <p class="name">{{item.source}}-{{item.description}}</p>
                    <div class="info">
                        <i class="el-icon-loading"></i><span>{{item.examDate}}</span>
                        <i class="iconfont icon-icon-time"></i><span v-if="item.totalTime != null">限时{{item.totalTime}}分钟</span>
                        <i class="iconfont icon-fenshu"></i><span>满分{{item.totalScore}}分</span>
                    </div>
                </li>
            </ul>
            <div class="pagination">
                <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="current"
                        :page-sizes="[6, 10, 20, 40]"
                        :page-size="size"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="total">
                </el-pagination>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "TeacherPaper",
        data() {
            return {
                tableData: null, //所有考试信息
                current: 1, //当前页
                total: null, //记录条数
                size: 6, //每页条数
                formInline: {
                    "source": "",
                },

                topicCount: [],//每种类型题目的总数
                score: [],  //每种类型分数的总数
                paperData: { //考试信息
                    source: null,
                    totalScore: 0,
                },
                topic: {  //试卷信息

                },
                paperId: '',
            }
        },
        mounted() {
            this.select()
        },
        methods: {
            //初始化页面数据
            // init(paperId) {
            //     this.paperData.totalScore = 0;
            //     this.getRequest(`/paperManage/paper/${paperId}`).then(res => {  //通过examCode请求试卷详细信息
            //         this.topic = res;
            //         for (let key in res) {
            //             let data = res[key]
            //             this.topicCount.push(data.length)
            //             let currentScore = 0
            //             for (let i = 0; i < data.length; i++) { //循环每种题型,计算出总分
            //                 currentScore += data[i].score
            //             }
            //             this.paperData.totalScore += currentScore
            //             this.score.push(currentScore) //把每种题型总分存入score
            //         }
            //     })
            // },
            //获取当前所有考试信息
            select() {
                this.postRequest('/exam/selectStudentOnlineExam/' + this.current + '/' + this.size, this.formInline).then(resp => {
                    // 看一下返回信息
                    // console.log(this.formInline);
                    // alert(JSON.stringify(resp));
                    if (resp) {
                        this.tableData = resp.data.records;
                        this.total = resp.data.total;
                    }
                })
            },
            // 分页改变每页数量
            handleSizeChange(size) {
                this.size = size;
                this.select();
            },
            // 分页改变当前页数
            handleCurrentChange(current) {
                this.current = current;
                this.select();
            },
            //跳转到试卷详情页
            toPaperInfo(id) {
                this.$router.push({path: '/student/studentExamInfo', query: {id: id}})
            }
        }
    }
</script>

<style lang="scss" scoped>
    .pagination {
        padding: 20px 0px 30px 0px;
        .el-pagination {
            display: flex;
            justify-content: center;
        }
    }
    .paper {
        h4 {
            cursor: pointer;
        }
    }
    .paper .item a {
        color: #000;
    }
    .wrapper .top .order {
        cursor: pointer;
    }
    .wrapper .top .order:hover {
        color: #0195ff;
        border-bottom: 2px solid #0195ff;
    }
    .wrapper .top .order:visited {
        color: #0195ff;
        border-bottom: 2px solid #0195ff;
    }
    .item .info i {
        margin-right: 5px;
        color: #0195ff;
    }
    .item .info span {
        margin-right: 14px;
    }
    .paper .item {
        width: 380px;
        border-radius: 4px;
        padding: 20px 30px;
        border: 1px solid #eee;
        box-shadow: 0 0 4px 2px rgba(217,222,234,0.3);
        transition: all 0.6s ease;
    }
    .paper .item:hover {
        box-shadow: 0 0 4px 2px rgba(140, 193, 248, 0.45);
        transform: scale(1.03);
    }
    .paper .item .info {
        font-size: 14px;
        color: #88949b;
    }
    .paper .item .name {
        font-size: 14px;
        color: #88949b;
    }
    .paper * {
        margin: 20px 0;
    }
    .wrapper .paper {
        display: flex;
        justify-content: space-around;
        flex-wrap: wrap;
    }
    .top .el-icon-search {
        position: absolute;
        right: 10px;
        top: 10px;
    }
    .top .icon {
        position: relative;
    }
    .wrapper .top {
        border-bottom: 1px solid #eee;
        margin-bottom: 20px;
    }
    #myExam .search-li {
        margin-left: auto;
    }
    .top .search-li {
        margin-left: auto;
    }
    .top li {
        display: flex;
        align-items: center;
    }
    .top .search {
        margin-left: auto;
        padding: 10px;
        border-radius: 4px;
        border: 1px solid #eee;
        box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
        transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    }
    .top .search:hover {
        color: #0195ff;
        border-color: #0195ff;
    }
    .wrapper .top {
        display: flex;
    }
    .wrapper .top li {
        margin: 20px;
    }
    #myExam {
        width: 980px;
        margin: 0 auto;
    }
    #myExam .title {
        margin: 20px;
    }
    #myExam .wrapper {
        background-color: #fff;
    }
</style>
